<template>
  <el-scrollbar
    style="height: 100%; background-color: whitesmoke"
    class="page-component__scroll"
  >
    <div class="audit-global">
      <el-row>
        <div class="audit-flex-header" style="display: flex">
          <!--        <div class="audit-review">素材审核</div>-->
          <div class="audit-one">
            <img
              :src="urlSrc"
              alt=""
              style="width: 100%; height: auto"
            />
          </div>
        </div>
        <div class="audit-flex-right">
          <div class="audit-flex-right-content">
            <!--           {{$t('Language')}} 语言：-->
            {{ $t("createauditpage.language") }}：
            <el-radio-group v-model="language" @change="changeLanguage">
              <el-radio label="1">{{ $t("createauditpage.chinese") }}</el-radio>
              <el-radio label="2">English</el-radio>
            </el-radio-group>
          </div>

        </div>
      </el-row>
      <el-row type="flex" justify="center" style="padding-bottom: 50px">
        <el-col :lg="15">
          <el-card class="base-info-card" style="padding: 0">
            <el-row class="card-title">{{ $t("createauditpage.baseinformation") }}</el-row>
            <el-row v-for="(item,index) in baseInfo" :key="index">
              <el-row class="card-baseInfo">
                <span>{{ $t("createauditpage.offername") }}</span> <span class="baseInfo-content">{{
                  item.offerName
                }}</span>
              </el-row>
              <el-row class="card-baseInfo" style="border-top: 2px solid #f0f2f5">
                <span>{{ $t("createauditpage.submiter") }}</span> <span class="baseInfo-content">{{
                  item.auditor
                }}</span>
              </el-row>
            </el-row>
            <el-row class="card-title">{{ $t("createauditpage.createInfo") }}</el-row>
            <el-row>
              <!--  -->
              <div
                class="creative-info"
                v-for="(item, index) in creativeSummary"
                :key="index"
                :style="{
                  borderBottom:index !== creativeSummary.length - 1? '2px solid #f0f2f5': '',
                }"
              >
                <div :style="{width:userMod?'40%':'520px',margin:userMod?'1% 1.4% 1% 16px':'10px 15px 10px 16px'}"
                     style="display: flex;flex-wrap: wrap;">
                  {{ $t("createauditpage.medium") }} :
                  <span class="platform" v-for="(it, i) in item.platform.split(',')"
                        :key="i">{{ platformChange(it) }}</span>
                </div>
                <div :style="{width:userMod?'25%':'90px',margin:userMod?'1% 1.4% 1% 1%':'10px 15px 10px 0'}">
                  {{ $t("createauditpage.image") }}
                  <span class="baseInfo-content" :style="{marginLeft: userMod? '5px' :'10px'}">{{ item.image }}</span>
                </div>
                <div :style="{width:userMod?'20%':'90px',margin:userMod?'1% 1.4% 1% 1%':'10px 15px 10px 0'}">
                  {{ $t("createauditpage.video") }}
                  <span class="baseInfo-content" :style="{marginLeft:userMod ? '5px':'10px'}">{{ item.video }}</span>
                </div>
              </div>
            </el-row>
          </el-card>

          <div class="waterfall">

            <div
              v-for="(item, index) in creativeInfo"
              :key="index"
              style="padding: 0px 10px 10px 10px; box-sizing: border-box; break-inside: avoid"
            >
              <el-card style="width: 100%; font-size: 12px;position: relative">
                <el-row>
                  <cs-image
                    style="height: 300px;
                      width: 100%;
                      margin-bottom: 10px;
                      cursor: pointer;"
                    :src="item.type == '0'?item.waterUrl:fixUrl(item.thumbnailUrl)"
                    @click="openCreativeDetail(item.type, item.waterUrl)"
                  ></cs-image>
                  <!--<el-image-->
                  <!--  v-if="item.type == '0'"-->
                  <!--  lazy-->
                  <!--  style="-->
                  <!--    height: 300px;-->
                  <!--    width: 100%;-->
                  <!--    margin-bottom: 10px;-->
                  <!--    cursor: pointer;-->
                  <!--  "-->
                  <!--  :src="item.waterUrl"-->
                  <!--  @click="openCreativeDetail(item.type, item.waterUrl)"-->
                  <!--&gt;-->
                  <!--  <div slot="placeholder" class="img-onload">-->
                  <!--    <i class="el-icon-loading" style="font-size: 50px"/>-->
                  <!--  </div>-->
                  <!--  <div slot="error" class="img-error">-->
                  <!--    &lt;!&ndash;<i class="el-icon-picture-outline" style="font-size: 50px;"/>&ndash;&gt;-->
                  <!--    <span style="display: block">加载失败</span>-->
                  <!--  </div>-->
                  <!--</el-image>-->

                  <!--<el-image-->
                  <!--  v-if="item.type == '1'"-->
                  <!--  @load="showPlay(index)"-->
                  <!--  lazy-->
                  <!--  style="-->
                  <!--    height: 300px;-->
                  <!--    width: 100%;-->
                  <!--    margin-bottom: 10px;-->
                  <!--    z-index: 1;-->
                  <!--    cursor: pointer;-->
                  <!--  "-->
                  <!--  :src="fixUrl(item.thumbnailUrl)"-->
                  <!--  @click="openCreativeDetail(item.type, item.waterUrl)"-->
                  <!--&gt;-->
                  <!--  <div slot="placeholder" class="img-onload">-->
                  <!--    <i class="el-icon-loading" style="font-size: 50px"/>-->
                  <!--  </div>-->
                  <!--  <div slot="error" class="img-error">-->
                  <!--    &lt;!&ndash;<i class="el-icon-picture-outline" style="font-size: 50px;"/>&ndash;&gt;-->
                  <!--    <span style="display: block">加载失败</span>-->
                  <!--  </div>-->
                  <!--</el-image>-->

                  <el-image
                    class="img-larGen"
                    v-show="item.type == '1'"
                    style="
                      width: 20%;
                      position: absolute;
                      left: 50%;
                      top: 50%;
                      transform: translate(-50%,-50%);
                      z-index: 999;
                      cursor: pointer;
                      transition: all 0.2s linear;
                    "
                    src="/img/icon/Play.png"
                    @click="openCreativeDetail(item.type, item.waterUrl)"
                  />
                </el-row>
                <!-- 增加素材id -->
                <el-row>
                  <el-col :span="12">
                    <el-row>
                      <el-col :span="6">{{ $t("createauditpage.creativeId") }}:</el-col>
                      <el-col :span="18">
                        <div style="font-weight:bolder;"> {{ item.shortId }}</div>

                        <!-- <div v-for="(info,i) in creativeInfo" :key="i" style="font-weight:bolder;">
                          <div>{{info.shortId}}</div>
                        </div> -->
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="12">
                    <el-row>
                      <el-col :span="6">{{ $t("createauditpage.medium") }}：</el-col>
                      <el-col :span="18" class="detail-platform">
                        <div class="platform" v-for="(it, i) in item.platform.split(',')" :key="i">
                          {{ platformChange(it) }}
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>





                <el-row @click="checkAllThought">
                  <el-col :span="3">{{ $t("createauditpage.thinking") }}：</el-col>
                  <el-col :span="21" v-if="item.thought !== ''">
                    <div @click="openThoughDialog(item.thought,index)" class="thought">{{ item.thought }}</div>
                    <!--                    <el-collapse>-->
                    <!--                      <el-collapse-item title="Consistency" name="1">-->
                    <!--                        <div>{{ item.thought + item.thought + item.thought}}</div>-->
                    <!--                      </el-collapse-item>-->
                    <!--                    </el-collapse>-->
                  </el-col>
                </el-row>
                <el-row style="margin-bottom: 8px">
                  <div style="margin-bottom: 5px">{{ $t("createauditpage.comment") }}：</div>
                  <el-input
                    :disabled="useType === 'check'"
                    v-model="item.comments"
                    size="mini"
                    type="textarea"
                  ></el-input>
                </el-row>
                <el-row style="text-align: center">
                  <el-col :span="12">
                    <el-radio v-model="item.status" :label="3" :border="true" :disabled="status1"
                    >{{ $t("createauditpage.refuse") }}
                    </el-radio>

                  </el-col>
                  <el-col :span="12">
                    <el-radio v-model="item.status" :label="2" :border="true" :disabled="status1"
                    >{{ $t("createauditpage.agree") }}
                    </el-radio>
                  </el-col>
                </el-row>
                <el-row v-show="thoughDialog && thoughtDialogIndex === index" class="creative_dialog-border"
                        @click.native.self="closeThoughDialog">
                  <div class="creative_dialog-thought">
                    <div class="creative_dialog-title">思路:</div>
                    <div class="creative_dialog-body">{{ creative_thought }}</div>
                  </div>
                </el-row>
              </el-card>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="text-align: center;position: fixed;bottom:0;z-index: 100">
          <el-button style="font-size: 20px;"
                     class="submitButton"
                     type="primary"
                     size="mini"
                     @click="submit"
                     :disabled="this.status1"
          >{{ $t("createauditpage.submit") }}
          </el-button>
        </el-col>
      </el-row>
    </div>

    <el-backtop style="bottom: 80px; right: 20px;"
                target=".page-component__scroll .el-scrollbar__wrap"
    ></el-backtop>

    <!--素材详细信息-->
    <el-dialog
      :visible.sync="creativeDetail"
      :modal-append-to-body="false"
      :close-on-click-modal="true"
      :before-close="handleDetailClose"
      :append-to-body="true"
      :show-close="false"
      top="0px;"
      class="creative-dialog"
      width="60%"
    >
      <div style="text-align: center;width: 100%;height: 100%">
        <div slot="title" style="text-align: right">
          <el-button class="dialog-close" size="mini" icon="el-icon-close" @click="handleDetailClose"
                     circle></el-button>
        </div>
        <el-image :style="previewStyle()"
                  :src="detailCreative"
                  v-show="detailType == '0'"
                  fit="fill"
        >
        </el-image>
        <video
          v-show="detailType == '1'"
          ref="video"
          :src="detailCreative"
          autoplay="autoplay"
          controls="controls"
          class="creative_edit"
        ></video>
      </div>
    </el-dialog>
  </el-scrollbar>
</template>

<script>
import {outExamineMain, outExamineSubmit} from "@/api/offer/creativeaudit";
import {transformObjectList, findObject} from "@/util/util";
import {getSysDictList} from "@/api/system/dict";
import CsImage from "@/components/CsImage/CsImage";

export default {
  name: "createauditpage",
  components: {
    CsImage
  },
  data() {
    return {
      status1: "",
      urlSrc: '/img/bg/creativeAuditZh.png',
      userMod: false,//屏幕宽度
      offerName: "",
      auditor: "",
      baseInfo: [],
      language: '1',
      creativeInfo: [],
      googleList: [],
      faceBookList: [],
      googleStatus: false,
      faceBookStatus: false,
      basicInfo: {
        countInfo: {
          platform: [],
          img: [],
          vid: [],
        },
      },
      thoughtDialogIndex: '',
      thoughDialog: false,//思路弹窗
      creative_thought: '',//思路内容
      creativeSummary: [],
      key: null,
      btnDisable: false,
      detailType: "", //素材类型
      detailCreative: "", //素材地址
      creativeDetail: false,
      playIcon: [],

      platformList: [],
    };
  },
  created() {
    getSysDictList('platforms').then(map => {
      this.platformList = map['platforms'];
    });

    this.userMod = this.ids()
    this.key = this.$route.query.key;
    outExamineMain({key: this.key}).then((res) => {

      this.offerName = res.data.data.basicInfo.offerName;
      this.auditor = res.data.data.basicInfo.username;
      this.baseInfo.push({offerName: this.offerName, auditor: this.auditor});
      this.creativeInfo = res.data.data.creativeInfo;

      this.creativeInfo.map((item) => {
        if (item.type === 1) this.playIcon.push(false);

      });
      if (res.data.data.basicInfo.approvedTime == "") {
        this.status1 = false
      } else {
        this.status1 = true
      }

      this.dynamicNumber();
    });
  },
  methods: {
    //修改平台样式
    platformChange(val) {
      let re
      this.platformList.map((item) => {
        if (item.dictKey === val) {
          re = item.dictValue
        }
      })
      return re
    },
    changeLanguage() {
      if (this.language === '2') {
        this.$i18n.locale = 'en'   //设置中英文模式
        this.urlSrc = '/img/bg/creative_en.png'
      } else {
        this.$i18n.locale = 'zh'
        this.urlSrc = '/img/bg/creativeAuditZh.png'
      }

    },

    //打开思路弹窗
    openThoughDialog(val, index) {
      this.thoughDialog = true;
      this.creative_thought = val
      this.thoughtDialogIndex = index
    },

    //关闭思路弹窗
    closeThoughDialog() {
      this.thoughDialog = false;
      this.thoughtDialogIndex = '';
      this.creative_thought = '';
    },

    //判断是移动端开始WEB端
    ids() {
      let userAgent = navigator.userAgent, Agent = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
      return Agent.some(i => {
        return userAgent.includes(i)
      })
    },
    previewStyle() {
      // let height = window.innerHeight < 300 ? 300 : window.innerHeight - 160;
      return {
        // width: "100%",
        // maxHeight: height + 'px'
      };
    },
    //动态获取图片视频数量
    dynamicNumber() {
      this.basicInfo.countInfo = {
        platform: [],
        vid: [],
        img: [],
      };
      this.creativeInfo.map((item) => {
        if (this.basicInfo.countInfo.platform.indexOf(item.platform) === -1) {
          this.basicInfo.countInfo.platform.push(item.platform);
        }
        if (!this.status1) {
          item.status = 2;
        }

      });
      this.basicInfo.countInfo.platform.map((i) => {
        let vidLength = 0;
        let imgLength = 0;
        this.creativeInfo.map((item) => {
          if (i === item.platform) {
            if (item.type === 1) {
              vidLength++;
            }
            if (item.type === 0) {
              imgLength++;
            }
          }
        });
        this.basicInfo.countInfo.vid.push(vidLength);
        this.basicInfo.countInfo.img.push(imgLength);
      });

      this.basicInfo.countInfo.platform.map((i, index) => {
        this.creativeSummary.push({
          platform: i,
          image: this.basicInfo.countInfo.img[index],
          video: this.basicInfo.countInfo.vid[index],
        });
      });
    },
    openCreativeDetail(type, url) {
      this.detailCreative = url;
      this.detailType = type;
      this.creativeDetail = true;
      this.thoughDialog = false;
      /*window.open(url)*/
    },
    //关闭详细素材窗口
    handleDetailClose() {
      this.creativeDetail = false;
      this.$refs.video.pause();
    },
    showPlay(index) {
      this.playIcon[index] = true;
      this.$forceUpdate(); // 强制刷新组件
    },
    submit() {
      let success = true;
      for (let i in this.creativeInfo) {
        if (
          this.creativeInfo[i].status !== 2 &&
          this.creativeInfo[i].status !== 3
        ) {
          this.$message({
            type: "error",
            message: "请勾选状态!",
          });
          success = false;
        }
      }
      if (success) {
        let dataExamine = {
          key: this.key,
          creativeInfo: this.creativeInfo,
        };
        this.btnDisable = true;
        outExamineSubmit(dataExamine).then(
          (res) => {
            if (res.data.success) {
              this.btnDisable = false;
              this.$message({
                type: "success",
                message: "审核成功",
              });
              /*setTimeout(() => {
                window.opener = null;
                window.location.href = "about:blank";
                window.close();
              }, 3000);*/
            }
          },
          (error) => {
            if (error) {
              this.btnDisable = false;
            }
          }
        );
      }
    },
    showThought(index) {
      return this.creativeInfo[index]['showThought'] === true ? 'thought-full' : 'thought';
    },
    // 兼容七牛云url地址
    fixUrl(url) {
      if (url) {
        const addr = url.split('://')[1]
        if (addr.startsWith('ads4each')) {
          console.log('1', url)
          return url + '?x-image-process=image/resize,m_lfit,h_280,w_280'
        } else {
          return url
        }
      } else {
        return ''
      }

    }
  },
  computed: {}
};
</script>

<style lang="scss" scoped>
/deep/ .el-radio__label {
  color: #409EFF;
}

.audit-global {
  width: 100%;
  /*height: 100%;*/
  height: 75px;
  background-color: #1f4d93;
  /*background-color: whitesmoke;*/
}

.audit-flex-header {
  text-align: center;
  justify-content: space-between;
  align-items: center;
  height: 75px;
  width: 231px;
  margin: 0 auto;
  color: white;
  position: relative;
}

.audit-flex-right {
  position: absolute;
  height: 75px;
  width: 230px;
  top: 0;
  right: 20%;

  .audit-flex-right-content {
    align-items: center;
    margin: auto;
    width: 270px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    height: 75px;
    line-height: 8.3;
    font-size: 15px;
    color: white;
  }

}

.audit-one {
  width: 100%;
  max-height: 50px;
  vertical-align: middle;
  padding-bottom: 3px;
}

.audit-review {
  font-size: 15px;
  margin-left: 15px;
}

.base-info-card {
  min-height: 200px;
  margin: 10px;

  /deep/ .el-card__body {
    padding: 0;
  }
}

.img-larGen:hover {
  transform: scale(1.1);
}

.img-error {
  width: 100%;
  height: 250px;
  text-align: center;
  line-height: 250px;
  background-color: #eee;
}

.img-onload {
  width: 100%;
  height: 250px;
  text-align: center;
  line-height: 250px;
}

@media screen and (max-width: 675px) {
  .waterfall {
    column-count: 1;
    column-gap: 0;
  }

  .submitButton {
    size: 25px;
    width: 95%;
    height: 45px;
  }
}

@media screen and (min-width: 675px) {
  .waterfall {
    column-count: 2;
    column-gap: 0;
  }

  .submitButton {
    width: 20%;
    height: 45px;
  }
}

.card-title {
  background-color: #d3d7dd;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
}

.card-baseInfo {
  width: 100%;
  color: #909399;
  font-size: 14px;
  font-weight: 800;
  line-height: 35px;
  margin: 0px 20px;

  span {
    display: inline-block;
    width: 95px;
  }

  :nth-child(2) {
    width: 80%;
  }

}

.baseInfo-content {
  color: #303133;
  font-weight: 500;
}

.creative-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 5px;

  div {
    padding: 3px 10px;
    line-height: 16px;
    font-size: 14px;
    color: #909399;
    font-weight: 800;
    border-radius: 4px;
    border: 1px solid #f0f2f5;
    background-color: #f0f2f5;
    min-height: 16px;
  }

  .platform {
    margin: 0 0 0 15px;
    line-height: 16px;
    background: #66b1ff;
    color: white;
    padding: 0 7px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
  }
}

.detail-platform {
  display: flex;

  .platform {
    margin: 0 5px 0 0;
    line-height: 16px;
    background: #66b1ff;
    color: white;
    padding: 2px 7px;
    font-weight: 500;
    border-radius: 4px;
  }
}

.thought {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 4px;
  background-color: #f0f2f5;
  padding: 3px 30px 3px 10px;
}

.thought-full {
  white-space: pre-wrap;
  cursor: pointer;
  border-radius: 4px;
  background-color: #f0f2f5;
  padding: 3px 30px 3px 10px;
}

.creative-dialog {
  .dialog-close {
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0);
    color: white;
  }

  /deep/ .el-dialog {
    background: rgba(255, 255, 255, 0);
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  /deep/ .el-dialog__header {
    padding: 0;
  }

  /deep/ video {
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 80vh;
  }
}

.creative_dialog-border {
  width: 100%;
  height: 100%;
  background: rgba(144, 146, 152, 0.3);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.creative_dialog-thought {
  background: white;
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  font-size: 14px;
  border-radius: 4px;
}

.creative_dialog-title {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 500;
}

.creative_dialog-body {
  overflow-y: scroll;
  max-height: 450px;
  word-wrap: break-word;
  white-space: pre-wrap
}

@media screen and (min-width: 675px) {
  .creative_dialog-body {
    overflow-y: scroll;
    max-height: 400px;
    word-wrap: break-word;
    white-space: pre-wrap
  }
}

</style>
